<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" th:href="@{/static/css/slideImg/base.css}">
<div th:include="/thymeleaf/common/_head2::headx('商品详情')"	th:remove="tag"></div>

<style>
li {
	list-style-type: none;
}

li.attrValue {
	float: left;
	margin-right: 5px;
	margin-left:5px;
	list-style-type: none;
	cursor:pointer;
	border: 1px solid white;
}

li.attrValue:hover {
	border: 1px solid blue;
}

li.selected {		
	border: 1px solid red;
}

a:hover { text-decoration:none; } 

</style>

</head>
<body>
	<!-- header -->
	<div class="row clearfix">
		<div id="header" class="col-md-12 column"></div>
	</div>
	<div class="container">
		<!-- 登录窗口 -->
		<div class="row clearfix">
			<div class="col-md-12 column">
				<!-- <a hidden="true" id="modal-273078" href="#modal-container-273078" role="button" class="btn" data-toggle="modal">触发遮罩窗体</a> -->
				<input id="modal-273078" type="hidden" class="btn btn-primary"
					value="用户登录" data-toggle="modal"
					data-target="#modal-container-273078" />
				<div class="modal " id="modal-container-273078" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">×</button>
								<h4 class="modal-title" id="myModalLabel">登录</h4>
							</div>
							<div class="modal-body">
								<div class="loginBox">
									<label for="loginName">帐号</label> <input type="text"
										id="loginName" name="loginName" placeholder="邮箱/会员帐号/手机号"
										autofocus required>
								</div>
								<div class="password">
									<label for="password">密码 </label> <input type="password"
										id="password" name="password" placeholder="请输入密码" required>
								</div>
							</div>
							<div class="modal-footer">
								<button id="btnClose" type="button" class="btn btn-default"
									data-dismiss="modal">关闭</button>
								<button id="btnLogin" type="button" class="btn btn-primary">登录</button>
							</div>
						</div> 

					</div>

				</div>

			</div>
			<!-- end of 弹出窗口 -->

			<div class="row clearfix">
				<div class="col-md-12 column">
					<div class="row clearfix">
						<H4>产品详情</H4>
						<div class="col-md-5 column">
							<div class="row clearfix">
								<div th:if="${not #lists.isEmpty(skuPicts)}" class="spec-preview" id="preview">
									<span class="jqzoom">
										<img alt="450x450" style="width:450px;height:450px"  th:attr="jqimg=${skuPicts[0].pictureUrl}" th:src="${skuPicts[0].pictureUrl}"  />
									</span>
								</div>
							</div>
							</br>
							<!-- 缩略图显示 --> 
							<div class="row clearfix">
								<div class="">
									<!--缩图开始-->
									<div class="spec-scroll"> <a class="prev">&lt;</a> <a class="next">&gt;</a>
	 										<div class="items">
											<ul>
												<li th:each="pict : ${skuPicts}" th:attr="data-bind=${pict.pictureId}+':'+${pict.skuId}">
													<img  th:src="${pict.pictureUrl}" th:attr="bimg=${pict.pictureUrl}"	onmousemove="preview(this);" />
												</li>
		
											</ul>
										</div>
									</div>
									<!--缩图结束-->
								</div>
							</div>
							</br>
							<div class="row clearfix">
								<div class="col-md-12 column">
									<a class="follow J-follow" id="myFavourite"
										th:attr="data-id=${item.itemId}" href="#none"
										clstag="shangpin|keycount|product|guanzhushangpin_1"> <i
										class="icon-heart-empty icon-large" style="color: red"></i>关注
									</a>
								</div>
							</div>
						</div>
						<div class="col-md-7 column">
							<span id="itemName" style="font-size: 18px"
								th:text="${item.itemName}">产品名称：Apple iPhone 6s Plus
								(A1699) 32G 玫瑰金色 移动联通电信4G手机</span> <br>
							<div class="row clearfix">
								<div class="col-md-12 column">
									<table class="table">
										<thead>
											<tr>
												<th></th>  <!-- 商品关键属性 -->
												<th></th>  <!-- 商品关键属性值 -->
											</tr>
										</thead>
										<tbody>
											<tr class="">
												<td>价 格</td>
												<td th:text="${sku.sell_price}"></td>
											</tr>
											<tr class="">
												<td>体积</td>
												<td th:text="${sku.volume}"></td>
											</tr>
											<tr class="">
												<td>重量</td>
												<td th:text="${sku.weight}">3.8kg</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="row clearfix">
								<div class="col-md-12 column">
									<div th:if="${not #lists.isEmpty(attrValueList)}" class="select-sku" th:remove:"tag">
										<table class="table">
											<thead>
												<tr>
													<th></th>  <!-- 商品销售属性 -->
													<th></th>  <!-- 商品销售属性值 -->
												</tr>
											</thead>
											<tbody>
												<tr class="" th:each="attrValue : ${attrValueList}">
													<td th:text="${attrValue.attrName}">选择颜色</td>
													<td><ul>
															<li th:each="value : ${attrValue.valueList}"
																class="attrValue"
																th:attr="data-bind=${value.attr_id}+':'+${value.value_id}"><span
																th:text="${value.value_name}">属性值</span></li>
														</ul></td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<br>
							<div class="row clearfix">
								<div class="col-md-12 column">
									<label for="amount">数量</label> 
									<input type="number" name="amount" id="amount" value="1"   
										onkeyup="onkeyup_check(this)" 
										onchange="onkeyup_check(this)" 
    									onafterpaste="paste_check(this)" 
    								/> 
									<a
										href="javascript:void(0);" onclick="return false;"
										class="submit-btn btn btn-primary" data-bind="1" id="cartAdd">
										加入购物车<b></b>
									</a> 
									<!-- <a href="javascript:void(0);" onclick="return false;"
										class="submit-btn btn btn-primary" data-bind="1"> 一键购<b></b></a> -->
								</div>
							</div>
						</div>
					</div>
					<!-- 产品介绍、技术指标、保修 -->
					<div class="row clearfix">
						<div class="col-md-10 col-md-offset-2 column">
							<div class="tabbable" id="tabs-1">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#panel-1" data-toggle="tab">商品介绍</a></li>
									<li><a href="#panel-2" data-toggle="tab">规格与包装</a></li>
									<li><a href="#panel-3" data-toggle="tab">售后保障</a></li>
								</ul>
								<div class="tab-content">
									<!-- 产品说明 -->
									<div class="tab-pane active" id="panel-1">
										<span th:utext="${skuIntroduce.describe_url}" th:remove="tag"></span>
									</div>
									<!-- 技术规格与包装 -->
									<div class="tab-pane" id="panel-2">
										<!-- <span th:text="${skuIntroduce.sku_spec}"></span> -->
										<table class="table">
											<thead>
												<tr>
													<th>组名称</th>
													<th>指标</th>
												</tr>
											</thead>
											<tbody>
												<tr th:each="skuSpec:${skuSpecList}">
													<td th:text="${skuSpec.spec_group}">组名称</td>
													<td>
														<ul  class="p-parameter-list">
															<li th:each="spec:${skuSpec.spec}" th:text="${spec.spec_key}+':'+${spec.spec_val}"></li>
														</ul>
													</td>
												</tr>
												<tr>
													<td>包装清单</td>
													<td>
														<ul>
															<li th:text="${skuIntroduce.packing_list}"></li>
														</ul>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<!-- 售后服务 -->
									<div class="tab-pane" id="panel-3">
										<span th:utext="${skuIntroduce.after_service}"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end of produce -->

				</div>
			</div>

		</div>
	</div>
	
	<input type="hidden" id="SkuAttribute" th:value="${sku.attributes}" />

	<form th:action="@{/front/product/sku/detail}" method="post"
		id="testform">
		<!-- SPU id -->
		<input type="hidden" name="itemId" id="itemId"
			th:value="${item.itemId}" /> <input type="hidden"
			name="skuAttribute" id="skuAttribute" th:value="${sku.attributes}" />
	</form>

	<!-- 增加到购物车时使用的表单（隐藏表单）  -->
	<form th:action="@{/front/cart/add}" method="post" id="addToCartForm">
		<!-- SPU id -->
		<input type="hidden" name="itemId" id="itemId"	th:value="${item.itemId}" /> 
		<input type="hidden" name="skuId"  id="skuId" th:value="${sku.sku_id}" /> 
		<input type="hidden" name="quantity" id="quantity" value="" /> 
		<input type="hidden" name="skuName" id="skuName" value="" />
	</form>
	
	<!-- footer -->
	<div class="row clearfix">
		<div id="footer" class="col-md-12 column"></div>
	</div>
	<!-- load header and footer  -->
	<script type="text/javascript"
		th:src="@{/static/js/loadHeaderFooter.js}"></script>

	<!-- 获取用户已经选商品列表  -->
	<script th:inline="javascript">  
			/*<![CDATA[*/  
      
			var g_skuSpec = [[${skuIntroduce.sku_spec}]];  
			console.log("SKU技术参数");  
      
			/*]]>*/  
	</script>

	
	<script type="text/javascript" th:src="@{/static/js/product_detail/product_detail.js}"></script>
	<script type="text/javascript" th:src="@{/static/js/quantityInputCheck.js}"></script>
	<script type="text/javascript" th:src="@{/static/js/slideImg/jquery.jqzoom.js}"></script>
	<script type="text/javascript" th:src="@{/static/js/slideImg/base.js}"></script>

</body>
</html>
